<template>
  <view class="body">
    <view class="tabs-box">
      <u-tabs-swiper ref="tabs" name="title" :list="tabs" :current="current" @change="(index)=>{swiperCurrent=index}"
                     :is-scroll="false"
                     :active-color="appTheme.checkColor" :inactive-color="appTheme.checkColor">
      </u-tabs-swiper>
    </view>
    <swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
      <swiper-item class="swiper-item" v-for="(tabItem, tabIndex) in tabs" :key="tabIndex">
        <scroll-view scroll-y style="height: 100%; padding-top: 10rpx;" v-if="tabIndex===0">
          <view class="onePage">
            <view class="onePage-box">
              <view class="u-flex">
                <u-avatar :src="tabItem.data.img" size="80"></u-avatar>
                <text style="margin-left: 20rpx">{{ tabItem.data.name }}</text>
                <text style="margin-left: 20rpx;color: #2979ff" @click="oneEdit(tabItem.data)">编辑</text>
              </view>
              <view class="onePage-two">
                <view class="onePage-two-item">
                  线索级别：{{ tabItem.data.title1 }}
                </view>
                <view class="onePage-two-item">
                  线索来源：{{ tabItem.data.title2 }}
                </view>
                <view class="onePage-two-item">
                  线索状态：{{ tabItem.data.title3 }}
                </view>
              </view>
              <view class="onePage-three">
                <view class="onePage-three-title">宝宝信息</view>
                <view class="onePage-two">
                  <view class="onePage-two-item">
                    宝宝姓名：{{ tabItem.data.title1 }}
                  </view>
                  <view class="onePage-two-item">
                    宝宝性别：{{ tabItem.data.title2 }}
                  </view>
                  <view class="onePage-two-item">
                    出生年月：{{ tabItem.data.title3 }}
                  </view>
                  <view class="onePage-two-item">
                    宝宝月龄：{{ tabItem.data.title3 }}
                  </view>
                </view>
              </view>
              <view class="onePage-three">
                <view class="onePage-three-title">家长信息</view>
                <view class="onePage-two">
                  <view class="onePage-two-item">
                    家长姓名：{{ tabItem.data.title1 }}
                  </view>
                  <view class="onePage-two-item">
                    关系：{{ tabItem.data.title2 }}
                  </view>
                  <view class="onePage-two-items">
                    联系电话：{{ tabItem.data.title3 }}
                  </view>
                  <view class="onePage-two-items">
                    家庭住址：{{ tabItem.data.title3 }}
                  </view>
                </view>
              </view>
            </view>
            <view class="u-flex" style="margin: 30rpx 0;justify-content: center;">
              <view style="width: calc(100% / 3)" v-if="tabItem.data.isActivate">
                <u-button class="btn" type="success" size="medium" @click="oneBtnOne(tabItem.data)">成交</u-button>
              </view>
              <view style="width: calc(100% / 3)" v-if="tabItem.data.isActivate">
                <u-button class="btn" type="warning" size="medium" @click="oneBtnTwo(tabItem.data)">放弃</u-button>
              </view>
              <view style="width: calc(100% / 3)" v-if="tabItem.data.isActivate">
                <u-button class="btn" type="primary" size="medium" @click="oneBtnThree(tabItem.data)">转交</u-button>
                <u-select v-model="careShow" :list="careList"
                          @confirm="oneBtnThreeList"></u-select>
              </view>
              <u-button class="btn" type="success" size="medium" @click="oneBtnFour(tabItem.data)"
                        v-if="!tabItem.data.isActivate">激活
              </u-button>
            </view>
          </view>
        </scroll-view>
        <scroll-view scroll-y style="height: 100%; padding-top: 10rpx;" v-else-if="tabIndex===1">
          <view class="twoPage">
            <u-time-line v-if="tabItem.data.length>0">
              <u-time-line-item v-for="(twoPageItem,towPageIndex) in tabItem.data" :key="towPageIndex">
                <template v-slot:content>
                  <view class="twoPage-item">
                    <view class="u-order-time">2019-12-06 22:30</view>
                    <view class="u-order-desc">
                      <view class="u-flex">
                        <u-avatar :src="twoPageItem.img" size="40"></u-avatar>
                        <text style="margin-left: 20rpx">{{ twoPageItem.name }}</text>
                      </view>
                      <view class="twoPage-body" v-if="twoPageItem.type===0">
                        <view class="twoPage-body-item">
                          跟进方式：电话
                        </view>
                        <view class="twoPage-body-item">
                          跟进内容：客户说目前还在观望中，对学习环境、教学质量。比较关注，已添加客户微信
                        </view>
                        <view class="twoPage-body-item">
                          下次跟进时间：2024年12月27日
                        </view>
                      </view>
                      <view class="twoPage-body" v-if="twoPageItem.type===1">
                        <view class="twoPage-body-item">
                          编辑内容：电话
                        </view>
                      </view>
                      <view class="twoPage-body" v-if="twoPageItem.type===2">
                        <view class="twoPage-body-item">
                          客户已成交
                        </view>
                      </view>

                    </view>
                  </view>
                </template>
              </u-time-line-item>
            </u-time-line>
            <view class="nothing" v-if="tabItem.data.length===0">
              <u-icon name="file-text"  size="300"></u-icon>
              <view>暂无跟进记录</view>
            </view>
            <u-icon class="myPlus" name="plus"  size="50" @click="TwoAdd"></u-icon>
          </view>
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import appMixin from "@/mixins/app";
import {evlPsycalList, healthList} from "@/api/evaluate";

export default {
  mixins: [appMixin],
  data() {
    return {
      id: '',
      careShow:false,
      careItem:{},
      careList:[
        {
          value: '1',
          label: '江'
        },
        {
          value: '2',
          label: '江1'
        },
      ],
      tabs: [
        {
          title: '基本信息',
          key: 1,
          request: evlPsycalList,
          data: {
            name: '家长',
            img: '',
            title1: 'A-普通用户',
            title2: '普通用户',
            title3: '用户',
            isActivate: true,
          },
        },
        {
          title: '跟进记录',
          key: 2,
          request: healthList,
          data: [
            {
              time:'1111',
              value:'121Asd',
              name:'asa阿是',
              img:'',
              type:0,
            },
            {
              time:'1111',
              value:'121Asd',
              name:'asa阿是',
              img:'',
              type:0,
            },
            {
              time:'1111',
              value:'121Asd',
              name:'asa阿是',
              img:'',
              type:0,
            },
            {
              time:'1111',
              value:'121Asd',
              name:'asa阿是',
              img:'',
              type:0,
            },
            {
              time:'1111',
              value:'121Asd',
              name:'asa阿是',
              img:'',
              type:0,
            },
            {
              time:'1111',
              value:'121Asd',
              name:'asa阿是',
              img:'',
              type:0,
            },
            {
              time:'1111',
              value:'121Asd',
              name:'asa阿是',
              img:'',
              type:0,
            },
            {
              time:'1111',
              value:'121Asd',
              name:'asa阿是',
              img:'',
              type:0,
            },
            {
              time:'1111',
              value:'121Asd',
              name:'asa阿是',
              type:1,
              img:''
            }
          ]
        }
      ],
      current: 0,
      swiperCurrent: 0,
    };
  },
  onLoad(options) {
    console.log(options);
    this.id = options.id;
  },
  mounted() {

  },
  methods: {
    transition({detail: {dx}}) {
      this.$refs.tabs.setDx(dx);
    },
    animationfinish({detail: {current}}) {
      this.$refs.tabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
    },
    oneEdit(item) {
      console.log('编辑', item)
    },
    oneBtnOne(item) {
      console.log('成交', item)
    },
    oneBtnTwo(item) {
      console.log('放弃', item)
    },
    oneBtnThree(item) {
      console.log('转交', item)
      this.careItem=item
      this.careShow=true
    },
    oneBtnThreeList(e){
      console.log('转交选择', e[0],this.careItem)
    },
    oneBtnFour(item) {
      console.log('激活', item)
    },
    TwoAdd(){
      console.log('新增')
    }
  }
}
</script>

<style lang="scss" scoped>
.body {
  height: 100%;
  width: 100%;

  .tabs-box {
    height: 88rpx;
  }

  .swiper-box {
    height: calc(100% - 88rpx);
    padding: 0 20rpx;

    .onePage {
      height: 100%;
      width: 100%;

      .onePage-box {
        background-color: #f2f2f2;
        border-radius: 20rpx;
        padding: 20rpx;

        .onePage-two {
          display: flex;
          flex-wrap: wrap;
          flex-direction: row;

          .onePage-two-item {
            width: 50%;
            padding: 10rpx 0;
          }

          .onePage-two-items {
            width: 100%;
            padding: 10rpx 0;
          }
        }

        .onePage-three {
          margin: 20rpx 0;
        }
      }
    }
    .twoPage{
      height: 100%;
      width: 100%;
      padding: 20rpx;
      overflow-y: auto;
      position: relative;

      .twoPage-item{

        .u-order-desc{
          margin-top: 20rpx;
          background-color: #f4f4f4;
          padding: 20rpx;
          border-radius: 20rpx;
          .twoPage-body{
            .twoPage-body-item{
              margin: 10rpx 0;
            }
          }
        }
      }

      .nothing{
        height: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
        padding-top: 40%;
      }

      .myPlus{
        position: fixed;
        bottom: 10vh;
        right: 40rpx;
        padding: 10rpx;
        border-radius: 50%;
        border: 5rpx solid;
        z-index: 999;
        background-color: #fff;
      }
    }
  }

}
</style>
